import React, {Component} from 'react'
import { Menu, Icon, Spin } from 'antd';
import { Link } from 'react-router'
import { fetchData } from "../../../components/AjaxConsumer";

const SubMenu = Menu.SubMenu;
export default class Sider extends Component {
    state = {
        current: '1',
        openKeys: ['sub1'],
        resData: null
    }
    handleClick = (e) => {
        console.log('click ', e);
        this.setState({
            current: e.key,
        });
    }
    onOpenChange = (openKeys) => {
        const state = this.state;
        const latestOpenKey = openKeys.find(key => !(state.openKeys.indexOf(key) > -1));
        const latestCloseKey = state.openKeys.find(key => !(openKeys.indexOf(key) > -1));

        let nextOpenKeys = [];
        if (latestOpenKey) {
            nextOpenKeys = this.getAncestorKeys(latestOpenKey).concat(latestOpenKey);
        }
        if (latestCloseKey) {
            nextOpenKeys = this.getAncestorKeys(latestCloseKey);
        }
        this.setState({ openKeys: nextOpenKeys });
    }
    getAncestorKeys = (key) => {
        const map = {
            sub3: [],
        };
        return map[key] || [];
    }
    refreshLeftMenu = () => {
        const options= {
            url: '/base/resource/menu',
            type: 'get'
        };
        fetchData(this, options, (resData) => {
            this.setState({
                resData: resData
            });
        });
    }
    componentDidMount(){
        this.refreshLeftMenu();
    }

    render() {
        let menuData = this.state.resData;
        let view,subMenu;
        if (menuData == null) {
            view = <Spin size="large"/>
        } else {
            let menuItemKey = 0,
                subMenuKey = 0;
            let loop = (data) => data.map((item) => {
                menuItemKey += 1;
                if (item.childResource) {
                    subMenuKey += 1;
                    return (
                        <SubMenu key={"sub" + subMenuKey} title={<span>{item.resourceName}</span>}>
                            {loop(item.childResource)}
                        </SubMenu>
                    );
                }
                return <Menu.Item key={menuItemKey}><Link to={item.href} >{item.resourceName}</Link></Menu.Item>;
            });
            subMenu = menuData.data.map((el) => {
                subMenuKey += 1;
                return (
                        <SubMenu key={"sub" + subMenuKey} title={<span><Icon type="mail" /><span>{el.resourceName}</span></span>}>
                            {loop(el.childResource)}
                        </SubMenu>
                )
            });
            view = (
                <Menu
                    theme="dark"
                    onClick={this.handleClick}
                    style={{ width: 240 }}
                    selectedKeys={[this.state.current]}
                    mode="inline"
                    openKeys={this.state.openKeys}
                    onOpenChange={this.onOpenChange}
                >
                    {subMenu}
                </Menu>
            )
        }
        return (
            <div>
                {view}
            </div>
        );
    }
}